﻿<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>首页</title>
    <script src="~/js/frame.js"></script>
    <style>
        indexcontainter {
            height: 100%;
            width: 100%;
            display: flex;
            flex-direction: column;
        }

        .indexhead {
            height: 70px;
            width: 100%;
            display: flex;
            flex-direction: row;
        }

        .indexcontent {
            height: 100%;
            width: 100%;
            display: flex;
            flex-direction: row;
        }

        .indexcontent_left {
            height: 100%;
            width: 160px;
        }

        .indexcontent_right {
            height: 100%;
            width: 100%;
        }

        .tabtitlecontainer {
            height: 39px;
            width: 100%;
            display: flex;
            align-items: center;
            border-bottom: 1px solid #d8dce5;
        }

        .tabmain {
            height: 39px;
            width: auto;
            line-height: 36px;
            overflow: scroll;
            float: left;
            overflow-y: hidden;
            overflow-x: auto;
            white-space: nowrap;
        }

        .tabop {
            height: 39px;
            width: 100px;
            display: flex;
            align-items: center;
            margin-left: 10px;
        }

        .tabtitle {
            width: 100px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            display: inline-block;
            position: relative;
            cursor: pointer;
            border: 1px solid #d8dce5;
            color: #495060;
            background: #fff;
            padding: 0 8px;
            font-size: 12px;
            margin-left: 5px;
        }

            .tabtitle:hover {
                width: 100px;
                height: 30px;
                line-height: 30px;
                text-align: center;
                display: inline-block;
                position: relative;
                cursor: pointer;
                background-color: #42b983;
                color: #fff;
                border-color: #42b983;
                padding: 0 8px;
                font-size: 12px;
                margin-left: 5px;
            }

        .tabactive {
            width: 100px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            display: inline-block;
            position: relative;
            cursor: pointer;
            background-color: #42b983;
            color: #fff;
            border-color: #42b983;
            padding: 0 8px;
            font-size: 12px;
            margin-left: 5px;
        }

            .tabactive::before {
                content: "";
                background: #fff;
                display: inline-block;
                width: 8px;
                height: 8px;
                border-radius: 50%;
                position: relative;
                margin-right: 2px;
            }
    </style>
</head>
<body>
    <div class="indexcontainter">
        <div class="indexhead">

        </div>
        <div class="indexcontent">
            <div class="indexcontent_left">
                <nav class="menu" data-ride="menu" style="width: 160px">
                    <ul id="indexTreeMenu" class="tree tree-menu" style="margin:0">
                    </ul>
                </nav>
            </div>
            <div class="indexcontent_right">
                <div class="tabtitlecontainer">
                    <div class="tabmain" id="tabmain"></div>
                    <div class="tabop">
                        <span style="cursor: pointer;" class="icon icon-times" title="关闭所有"></span>
                    </div>
                </div>
                <div class="tabcontentcontainer">
                    <div class="tabcontentcontainer" id="iframecontainer">

                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        var MenuTreeData = [];
        var MenuListData = [];
        var MenuTabList = [];
        var MenuUrl = GetRootPath() + "frame/org/module/getMenuRightTree";
        $(function () {
            InitPageHeightSetting();
            InitLeftMenu();
        })
        function InitPageHeightSetting() {
            $("#indexTreeMenu").height(document.body.clientHeight - 73);
        }
        function InitLeftMenu() {
            CloudPost({}, MenuUrl, function (res) {
                MenuTreeData = res.data;
                var MenuHtml = "";
                for (var i = 0; i < MenuTreeData.length; i++) {
                    var MenuItem = MenuTreeData[i];
                    if (MenuItem.name = '后台管理') {
                        MenuHtml += "<li class='open active'>";
                    } else {
                        MenuHtml += "<li>";
                    }
                    var MenuItemClass = "SubMenu";
                    if (MenuItem.isParent == false && MenuItem.extra.ModuleUrl != "") {
                        MenuItemClass = "MenuItem"
                    }
                    var MenuItemHtml = "<a class='" + MenuItemClass + "' menuid='" + MenuItem.id + "'>" + (MenuItem.extra.ModuleIcon != "" ? "<i class='icon " + MenuItem.extra.ModuleIcon + "'></i>" : "") + MenuItem.name + "</a>";
                    if (MenuItem.isParent) {
                        MenuItemHtml += RenderSubMenu(MenuItem.children);
                    } else {
                        MenuListData.push({ "menuid": MenuItem.id, "url": GetRootPath() + MenuItem.extra.ModuleUrl, "name": MenuItem.name });
                    }
                    MenuHtml += MenuItemHtml;
                    MenuHtml += "</li>";

                }
                $("#indexTreeMenu").html(MenuHtml);
                $('#indexTreeMenu').tree();
                //点击同步
                $(".SubMenu").click(function () {
                    var parent = $(this).parent()[0];
                    if (parent.className.indexOf('open') != -1) {
                        $(parent).removeClass('open');
                    } else {
                        $(parent).addClass('open');
                    }
                })
                //点击高亮
                $('#indexTreeMenu').on('click', 'a', function () {
                    $('#indexTreeMenu li.active').removeClass('active');
                    $(this).closest('li').addClass('active');
                });
                //点击菜单右侧增加tab
                var FrameHeight = (document.body.clientHeight - 73 - 40) + 'px';
                $(".MenuItem").click(function () {
                    var menuid = $(this).attr("menuid");
                    var menu = GetMenuData(menuid);
                    if (menu.MenuUrl == '') {
                        OpenAlert('提示', '该菜单未配置模块地址！')
                    }
                    //判断TabMenList是已经包含此窗口
                    if (MenuTabList.indexOf(menuid) < 0) {
                        //增加tab
                        var TabHtml = "";
                        TabHtml += "<div id='tab_" + menuid + "' class='tabtitle tabactive'>";
                        TabHtml += "<span>" + (menu.name.length > 4 ? menu.name.substr(0, 4) + "..." : menu.name) + "</span>";
                        TabHtml += "<i id='refresh_" + menuid + "' class='tabrefresh icon icon-refresh'></i>";
                        TabHtml += "<i id='delete_" + menuid + "' class='tabdelete icon icon-times'></i>";
                        TabHtml += "</div>";
                        $("#tabmain").append(TabHtml);
                        //增加iframe
                        var TabIFrameHtml = "<iframe class='tabiframe' id='frame_" + menuid + "' style='width:100%;border-width:0;vertical-align: bottom;height:" + FrameHeight + "' src='" + menu.url + "'></iframe>";
                        $("#iframecontainer").append(TabIFrameHtml);
                        MenuTabList.push(menuid);
                        //增加tab后滚动（防止超过屏幕tab栏长度后不显示）
                        var tabobj = $("#tabmain");
                        tabobj.scrollLeft(1000)
                    }
                    InitTabClick();
                    ChangeTab(menuid);
                })

            })
        }
        function InitTabClick() {
            //tab 点击事件
            $(".tabtitle").unbind("click").click(function () {
                var menuid = $(this).attr("id").split("_")[1];
                ChangeTab(menuid);
            })
            //删除事件
            $(".tabdelete").unbind("click").click(function () {
                var menuid = $(this).attr("id").split("_")[1];
                var tabclassname = $("#tab_" + menuid).attr('class');
                //删除tab
                $("#tab_" + menuid).remove();
                //删除iframe
                $("#frame_" + menuid).remove();
                //维护MenuTabList
                var activemenuid = "";
                for (var i = 0; i < MenuTabList.length; i++) {
                    if (MenuTabList[i] == menuid) {
                        //如果删除的tab是active的，则不做切换
                        if (tabclassname.indexOf("tabactive") >= 0) {
                            if (i == MenuTabList.length - 1 && i != 0) {
                                //如果删除的是最后一个tab,默认切换到前一个
                                activemenuid = MenuTabList[i - 1];
                            } else {
                                //切换到后一个
                                activemenuid = MenuTabList[i + 1];
                            }
                            ChangeTab(activemenuid)
                        }
                        MenuTabList.splice(i, 1);
                    }
                }
            })
            //刷新事件
            $(".tabrefresh").unbind("click").click(function () {
                var menuid = $(this).attr("id").split("_")[1];
                var menu = GetMenuData(menuid);
                $("#frame_" + menuid).attr("src", menu.url);
            })
            //tab栏滚动事件
            $(".tabmain").each(function (index, element) {
                element.onwheel = function (event) {
                    var table = $("#tabmain");
                    var right = table[0].scrollWidth - $(element).width();
                    //table[0].scrollWidth为div包含滚动部分的全部宽度，$(element).width()为div的宽度，计算可得知滚动部分长度
                    //table.scrollLeft()为div已经滚动了多少，相比较就可以判断div是否滚动完毕
                    if (table.scrollLeft() < right && event.deltaY > 0) {
                        //禁止事件默认行为（此处禁止鼠标滚轮行为关联到"屏幕滚动条上下移动"行为）
                        event.preventDefault();
                        var left = (table.scrollLeft() + 100);
                        table.scrollLeft(left)
                    }
                    if (table.scrollLeft() > 0 && event.deltaY < 0) {
                        //禁止事件默认行为（此处禁止鼠标滚轮行为关联到"屏幕滚动条上下移动"行为）
                        event.preventDefault();
                        var left = (table.scrollLeft() - 100);
                        table.scrollLeft(left)
                    }
                }
            })
        }
        function ChangeTab(menuid) {
            $(".tabtitle").each(function () {
                var id = $(this).attr("id");
                if (id != "tab_" + menuid) {
                    $(this).removeClass("tabactive");
                } else {
                    $(this).addClass("tabactive");
                }
            })
            $(".tabiframe").each(function () {
                var id = $(this).attr("id");
                if (id != "frame_" + menuid) {
                    $(this).hide();
                } else {
                    $(this).show();
                }
            })
        }
        function RenderSubMenu(SubMenuTreeData) {
            var MenuHtml = "<ul>";
            for (var i = 0; i < SubMenuTreeData.length; i++) {
                MenuHtml += "<li>";
                var MenuItem = SubMenuTreeData[i];
                var MenuItemClass = "SubMenu";
                if (MenuItem.isParent == false && MenuItem.extra.ModuleUrl != "") {
                    MenuItemClass = "MenuItem"
                }
                var MenuItemHtml = "<a class='" + MenuItemClass + "' menuid='" + MenuItem.id + "'>" + (MenuItem.extra.ModuleIcon != "" ? "<i class='icon " + MenuItem.extra.ModuleIcon + "'></i>" : "") + MenuItem.name + "</a>";
                if (MenuItem.isParent) {
                    MenuItemHtml += RenderSubMenu(MenuItem.children);
                } else {
                    MenuListData.push({ "menuid": MenuItem.id, "url": GetRootPath() + MenuItem.extra.ModuleUrl, "name": MenuItem.name });
                }
                MenuHtml += MenuItemHtml;
                MenuHtml += "</li>";
            }
            MenuHtml += "</ul>"
            return MenuHtml;
        }
        function GetMenuData(menuid) {
            var MenuData = {};
            for (var i = 0; i < MenuListData.length; i++) {
                var item = MenuListData[i];
                if (item.menuid == menuid) {
                    MenuData = item;
                    break;
                }
            }
            return MenuData;
        }
    </script>
</body>
</html>
